<template>
    <div class="bidding-info">
      <div class="btn-module">
        <transition name="fade">
          <el-radio-group v-model="btnTab" @change="changeTab">
            <el-radio-button label="table1">{{$t('biddingInfo.btn1')}}</el-radio-button>
            <el-radio-button label="table2">{{$t('biddingInfo.btn2')}}</el-radio-button>
            <el-radio-button label="table3">{{$t('biddingInfo.btn3')}}</el-radio-button>
            <el-radio-button label="table4">{{$t('biddingInfo.btn4')}}</el-radio-button>
            <el-radio-button label="table5">{{$t('biddingInfo.btn5')}}</el-radio-button>
            <el-radio-button label="table6">{{$t('biddingInfo.btn6')}}</el-radio-button>
            <el-radio-button label="table7">{{$t('biddingInfo.btn7')}}</el-radio-button>
          </el-radio-group>
        </transition>
      </div>
      <div class="table-module">
        <el-card>
          <el-input v-model="searchKeys" size="mini" placeholder="Global filter" style="width: 200px;"></el-input>
          <div class="date-module">
            <span>{{$t('biddingInfo.createTime')}}</span>
            <el-date-picker
              v-model="timeRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              @change="changeTimeRange"
              :range-separator="$t('bidding.to')"
              :start-placeholder="$t('bidding.startTime')"
              :end-placeholder="$t('bidding.endTime')">
            </el-date-picker>
          </div>
          <ag-grid-vue style="width: 100%; height:calc(100vh - 300px);" class="ag-theme-balham"
                       v-loading="themeLoading"
                       :gridOptions="biddingTable"
                       :enableSorting="true"
                       :enableFilter="true"
                       :enableColResize="true"
                       :groupHeaders="false"
                       :suppressRowClickSelection="true"
                       :toolPanelSuppressGroups="false"
                       :toolPanelSuppressValues="true">
          </ag-grid-vue>
          <el-pagination class="table-page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage">
          </el-pagination>
        </el-card>
      </div>
    </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import { AgGridVue } from "ag-grid-vue"
  export default {
    name: "biddingInfo",
    data(){
      return {
        timeRange: [ ],
        currentPage: 1,
        totalPage: 1,
        pageSize: 100,
        themeLoading: false,
        btnTab: 'table1',
        searchKeys: '',
        biddingTable: {
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        }
      }
    },
    components: {
      'ag-grid-vue': AgGridVue
    },
    computed: {
      ...mapGetters(['language'])
    },
    watch: {
      'searchKeys': function (n, o) {
        this.biddingTable.api.setQuickFilter(n)
      },
      language() {
        if (this.language === 'en') {
          this.getBiddingData()
        } else if (this.language === 'zh') {
          this.getBiddingData()
        }
      }
    },
    methods: {
      changeTimeRange() {
        console.log(this.timeRange,123)
        this.changeTab()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.changeTab()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.changeTab()
      },
      async getBiddingData(table,source) {
        this.themeLoading = true
        let res = await this.axios.post('/bidDetail/search', {
          "create_time":this.timeRange,
          "table":table,
          "source":source,
          "page":this.currentPage,
          "pageSize":this.pageSize,
          "language":this.language
        })
        let resData = res.data.data
        let rowData = resData.data
        this.totalPage = resData.total
        let columnDefs = []
        for(let i in rowData[0]) {
          columnDefs.push({
            headerName: i,
            field: i,
            cellRenderer: function (params) {
              let colId = params.column.colId
              let url = ['website','detail_url','网站url','招标文章链接','中标文章链接']
              if(url.includes(colId)){
                return '<a href="'+params.value+'" target="_blank" style="text-decoration: underline;color:#409EFF;">'+params.value+'</a>'
              }else {
                return params.value
              }
            }
          })
        }
        this.biddingTable.api.setColumnDefs(columnDefs)
        this.biddingTable.api.setRowData(rowData)
        this.themeLoading = false
      },
      changeTab() {
        let btnTab = this.btnTab
        switch (btnTab) {
          case 'table1':
            this.getBiddingData("cbi_crawl_summary","")
            break;
          case 'table2':
            this.getBiddingData("cbi_crawl_summary_related_lenovo","")
            break;
          case 'table3':
            this.getBiddingData("cbi_crawl_summary_dcg","")
            break;
          case 'table4':
            this.getBiddingData("cbi_crawl_tender_detail","lenovo")
            break;
          case 'table5':
            this.getBiddingData("cbi_crawl_tender_detail","DCG")
            break;
          case 'table6':
            this.getBiddingData("cbi_crawl_winning_detail","lenovo")
            break;
          case 'table7':
            this.getBiddingData("cbi_crawl_winning_detail","DCG")
            break;
          default:
            this.getBiddingData("cbi_crawl_summary","")
        }
      }
    },
    mounted(){
      this.changeTab()
    }
  }
</script>

<style lang="scss" scoped>
  .bidding-info{
    padding:20px;
    .btn-module{
      text-align: center;
      .fade-enter-active, .fade-leave-active {
        transition: opacity 1s ease-in-out;
        position: relative;
        left: -880px;
      }
      .fade-enter, .fade-leave-to{
        opacity: 0;
      }
    }
    .date-module{
      float:right;
    }
    .table-module{
      margin-top: 20px;
      .ag-theme-balham{
        clear:both;
        margin-top:5px;
      }
      .table-page{
        float:right;
      }
    }
  }

</style>
